<!--检查结果查询-->
<template>
  <div>
    <!-- 查询条件开始 -->
    <el-card style="margin-bottom:3px">
      <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
        <el-form-item label="检查项目" prop="checkItem" style="float: left">
          <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange" style="float: left">全选</el-checkbox>
          <div style="clear: both"/>
          <el-checkbox-group v-model="queryParams.checkItem" @change="handleCheckedItemChange">
            <el-checkbox
                    v-for="d in checkItemOptions"
                    :key="d.checkItemId"
                    :label="d.checkItemId"
                    :value="d.checkItemId"
            >{{ d.checkItemName }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="挂号单号" prop="registrationId">
          <el-input
                  v-model="queryParams.registrationId"
                  placeholder="请输入挂号单号"
                  clearable
                  size="small"
                  style="width:380px"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="query">搜索</el-button>
          <el-button type="primary" icon="el-icon-refresh" size="mini" >重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!--    查询条件结束-->
    <!--    数据表格开始-->

    <el-card style="margin-bottom:3px">
      <el-table
              ref="refTable"
              v-loading="loading"
              border
              highlight-current-row
              :data="tableData"
              @current-change="handleCurrentChange"
      >
        <el-table-column label="序号" align="center" type="index" width="50" />
        <el-table-column label="详情ID" align="center" width="300" prop="itemId" />
        <el-table-column label="项目名称" align="center" prop="itemName" />
        <el-table-column label="数量" align="center" prop="num" />
        <el-table-column label="单价(元)" align="center" prop="price" />
        <el-table-column label="金额(元)" align="center" prop="amount" />
        <el-table-column label="备注" align="center" prop="remark" />
        <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
        <el-table-column label="挂单单号" align="center" prop="registrationId" v-if="false" />
        <el-table-column label="患者姓名" align="center" prop="patientName" v-if="false" />
        <el-table-column prop="itemRefId" label="检查项目Id" v-if="false"  />

      </el-table>
    </el-card>
    <!-- 数据表格结束 -->
    <!-- 开始检查开始 -->
    <el-card style="margin-bottom:3px">
      <div v-if="showBottom" v-loading="bottomLoading">
        <el-form label-position="left" label-width="120px" inline class="demo-table-expand">
          <el-form-item label="挂号单号:">
            <span>{{ formData.registrationId }}</span>
          </el-form-item>
          <el-form-item label="患者姓名:">
            <span>{{ formData.patientName }}</span>
          </el-form-item>
          <el-form-item label="检查项目:">
            <span>{{ formData.checkItemName }}</span>
          </el-form-item>
          <el-form-item label="检查备注:">
            <span>{{ formData.remark }}</span>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" style="width:100%" icon="el-icon-plus" @click="handleStartCheck">开始检查</el-button>
        </div>
      </div>
      <div v-else style="text-align:center">
        暂无数据
      </div>
    </el-card>
    <!-- 开始检查结束 -->

  </div>

</template>

<script>

  const cityOptions = [];
  export default {
    methods: {
      // 添加检查
      handleStartCheck() {
        this.$confirm('是否确定开始检查, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // console.log("===================="+JSON.stringify(this.formData));
          this.$axios.post("/check/CareOrderItem/add",this.formData).then(res => {
            this.$message.success('开始检查成功')
            this.queryData()// 重新查询
            this.showBottom = false
          }).catch(() => {
            this.$message.error('开始检查失败')
            this.loading = false
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '开始已取消'
          });
        });
      },

      // 选中某一行之后
      handleCurrentChange(row) {
        this.currentRow = row
        if (row !== null) {
          this.bottomLoading = true

          this.formData.registrationId = row.registrationId
          this.formData.patientName = row.patientName
          this.formData.remark = row.remark
          this.formData.checkItemName = row.itemName
          this.formData.patientId = row.patientId
          this.formData.price = row.price
          this.formData.cocId = row.itemId
          this.formData.checkItemId = row.itemRefId
          this.showBottom = true
          this.bottomLoading = false

        }
      },

      //查询
      queryData(){
        this.$axios.post("/check/CareOrderItem/doch/",this.queryParams).then(r=>{

          this.tableData=r.data.data;

        })
      },

      //查询
      query(){
        this.queryData()
      },


      // 加载所有可用的检查项目
      selectAllCheckItem(){
        this.$axios.get("/check/checkItem/selectAllCheckItem").then(r=>{
          this.checkItemOptions = r.data.data
          this.queryParams.checkItemIds = this.checkItemOptions.map(item => item.checkItemId)
        })
      },
      //状态字典的解析
      initStatus(){
        this.$axios.get("/system/api/dict/data/findByType/his_order_details_status").then(result=>{
          this.statusOptions=result.data.data;
        })
      },
      //status
      statusFormat(row){
        let v=row.status;
        return this.formatDict(this.statusOptions,v);
      },


      // 全选
      handleCheckAllChange(val) {
        this.queryParams.checkItem = val ? this.checkItemOptions.map(item => item.checkItemId) : []
        this.isIndeterminate = false
      },
      // 选择某一个项目
      handleCheckedItemChange(value) {
        const checkedCount = value.length
        this.checkAll = checkedCount === this.checkItemOptions.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkItemOptions.length

      },
    },
    created() {
      //加载系统状态
      this.initStatus();
      //加载状态的字典数据
      this.selectAllCheckItem()
      //展示页面
      this.queryData()
      // 新开检查
    },

    data() {
      return {
        // 查询参数
        queryParams: {
          registrationId: undefined,

          checkItem: [],
        },
        //是否为全选状态
        checkAll: false,
        //检查项目数据
        checkItemOptions: [],
        cities: cityOptions,
        //是否为半选状态
        isIndeterminate: false,

        //表格数据
        tableData: [],
        // 是否打开查看结果的弹出层
        open: false,
        // 弹出层的标题
        title: '',
        // 当前查看的数据
        currentResult: {
          resultMsg: undefined,
          resultImg: []
        },
        //系统状态
        statusOptions:[],

        // 当前选中的行
        currentRow: undefined,
        // 下面的开始card的遮罩
        bottomLoading: false,
        // 是否显示开始检查的card
        showBottom: false,
        // 遮罩
        loading: false,

        //表单数据
        formData:{
          registrationId:"",
          patientName:"",
          checkItemName:"",
          remark:"",
          cocId:"",
          checkItemId:"",
          price:"",
          patientId:"",
          resultStatus:0,
        }


      }
    }

  }
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>